<template>
  <div class="page">
    <c-title :hide="false" text="社区中心"></c-title>
    <div class="top">
      <img :src="List.bg_img" />
    </div>
    <div class="centent">
      <div class="content_man">
        <div class="pbold">
          <p>{{ List.cate_name1 }}</p>
        </div>
        <van-row>
          <div v-for="(item, index) in oneList" :key="index" @click="addyy(item.id, 0)">
            <van-col span="6"><img :src="item.thumb" />
              <p>{{ item.name }}</p>
            </van-col>
          </div>
        </van-row>
      </div>
    </div>

    <div class="bootom">
      <div class="content_man">
        <div class="pbold">
          <p>{{ List.cate_name2 }}</p>
        </div>
        <van-row>
          <div v-for="(item, index) in twoList" :key="index" @click="addyy(showflase, item.id, 1)">
            <van-col span="6"><img :src="item.thumb" />
              <p>{{ item.name }}</p>
            </van-col>
          </div>
        </van-row>
      </div>

      <van-form>
        <van-cell-group inset>
          <van-dialog v-model="showflase" confirm-button-text="确认" cancel-button-text="取消" show-cancel-button
            title="预约信息" @confirm="onclose">
            <div class="boxl" v-for="(item, index) in formList" :key="index">
              <van-field v-if="item.type == 1" v-model="item.value" is-link readonly :label="item.title"
                placeholder="请选择预约时间" @click="dateshow = true" />
              <van-field v-if="item.name != 'price' && item.type == 0" v-model="item.value" :name="item"
                :label="item.title" :placeholder="'请填写' + item.title" :rules="[{ required: true }]" />
              <van-field v-if="item.name == 'price'" v-model="item.value" :name="item" :label="item.title"
                :placeholder="'默认金额为0,可不输入'" />
              <van-popup v-model="dateshow" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate"
                  @confirm="onConfirm" @cancel="dateshow = false" />
              </van-popup>
            </div>
          </van-dialog>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        List: [],
        oneList: [],
        twoList: [],
        datavalue: null,
        currentDate: new Date(),
        minDate: new Date(),
        dateshow: false,
        formList: [],
        showflase: false,
        member_id: 0,
        project_id: 0,
        arr: []
      };
    },
    activated() {
      this.getuser();
      this.getList();
    },
    methods: {
      getuser() {
        $http.post("member.member.member-data").then(response => {
          this.member_id = response.data.member.uid;
        });
      },
      onConfirm(datavalue) {
        this.dateshow = false;
        this.formList.forEach(item => {
          if (item.title == "时间") {
            item.value = this.formatDate(datavalue);
          }
        });
      },
      formatDate(datavalue) {
        return `${datavalue.getFullYear()}/${datavalue.getMonth() + 1}/${datavalue.getDate()}`;
      },
      getList() {
        $http.post("plugin.store-cashier.frontend.store.store-community.index").then(response => {
          this.List = response.data;
          this.oneList = response.data.list1;
          this.twoList = response.data.list2;
        });
      },
      addyy(project_id) {
        this.project_id = project_id;
        this.showflase = true;
        $http.post("plugin.store-cashier.frontend.store.store-community.get_attribute").then(response => {
          this.formList = response.data;
          this.formList.forEach(item => {
            this.$set(item, "value", "");
          });
        });
      },
      onclose(action, done) {
        // 获取会员id       
          if (this.formList[0].value == ""&&this.formList[1].value == ""){
            Toast("请输入完整信息");
            return;
          }
        $http
          .post("plugin.store-cashier.frontend.store.store-community.add_yuyue", {
            member_id: this.member_id,
            project_id: this.project_id,
            info:JSON.stringify(this.formList)
          })
          .then(response => {
            if (response.result == 1) {
              Toast(response.msg);
            }
            return;
          });

        this.form = {};
        // return done(true);
      }
    }
  };
</script>

<style lang="scss">
  .page {
    .top {
      img {
        width: 100%;
      }
    }

    .centent {
      margin: 1rem;

      .content_man {
        border-radius: 1rem;
        background-color: #fff;
        p:nth-last-child(){
          padding-top: 1rem;
        }
      }
    }

    .pbold {
      display: flex;
      justify-content: space-between;
      margin-left: 1.1rem;
      font-weight: bold;
    }

    .bootom {
      margin: 1rem;

      .content_man {
        border-radius: 1rem;
        background-color: #fff;
      }
    }
  }
</style>
